// 添加CSS样式用于编辑图标和右键菜单
const style = document.createElement('style');
style.textContent = `
    .dty-edit-dialog {
        border: none;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        padding: 20px;
        min-width: 600px; /* 修改对话框宽度 */
        // 修改对话框位置为中间偏下
        position: fixed;
        top: 50%;

    }
    
    .dty-edit-form input {
        width: 100%;
        padding: 8px;
        margin: 10px 0;
        box-sizing: border-box;
    }
    
    .dty-edit-form button {
        background: #007bff;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
        margin-right: 10px;
    }
    
    .dty-edit-form-buttons {
        margin-top: 15px;
        text-align: right; /* 按钮靠右显示 */
    }
    
    /* 右键菜单样式 */
    .dty-context-menu {
        position: fixed;
        background: white;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        padding: 5px 0;
        z-index: 10000;
        min-width: 150px;
    }

    .dty-context-menu-item {
        padding: 8px 15px;
        cursor: pointer;
        font-size: 14px;
    }
    
    .dty-context-menu-item:hover {
        background-color: #f5f5f5;
    }
    
    .dty-edit-title { /* 添加标题样式 */
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 15px;
        color: #333;
    }
    
    .dty-edit-hint { /* 添加提示信息样式 */
        font-size: 14px;
        color: #666;
        margin-bottom: 10px;
    }
    
    /* 增加文本框字体大小 */
    #dty-edit-content-input {
        font-size: 16px;
        line-height: 1.5;
        // 修改字体为微软雅黑和英文字体（编程字体）
        font-family: "Microsoft YaHei", Consolas, "Courier New", monospace;
    }
`;
document.head.appendChild(style);

// 立即执行函数，避免全局污染
(function() {
    // 当前编辑对话框元素和正在编辑的元素
    let editDialog = null;
    let currentEditingElement = null;
    let contextMenu = null;

    // 创建编辑对话框
    function createEditDialog() {
        // 创建对话框
        const dialog = document.createElement('dialog');
        dialog.className = 'dty-edit-dialog';
        
        // 创建表单
        const form = document.createElement('form');
        form.className = 'dty-edit-form';
        form.innerHTML = `
            <div class="dty-edit-title">编辑内容</div>
            <div class="dty-edit-hint">请输入建议的内容：</div>
            <textarea id="dty-edit-content-input" rows="7" style="width: 100%; padding: 8px; box-sizing: border-box;"></textarea>
            <div class="dty-edit-form-buttons">
                <button type="submit">提交</button>
                <button type="button" id="dty-cancel-edit">取消</button>
            </div>
        `;

        dialog.appendChild(form);
        document.body.appendChild(dialog);
        
        // 绑定表单提交事件
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            const inputValue = document.getElementById('dty-edit-content-input').value;
            if (currentEditingElement && inputValue.trim() !== '') {
                currentEditingElement.textContent = inputValue;
                dialog.close();
            }
        });
        
        // 绑定取消按钮事件
        document.getElementById('dty-cancel-edit').addEventListener('click', function() {
            dialog.close();
        });
        
        return dialog;
    }

    // 显示编辑对话框
    function showEditDialog(element) {
        currentEditingElement = element;
        
        // 初始化对话框元素
        if (!editDialog) {
            editDialog = createEditDialog();
        }
        
        // 设置输入框的值为当前元素的文本内容
        document.getElementById('dty-edit-content-input').value = element.textContent;

        // 显示对话框
        editDialog.showModal();
    }

    // 创建右键菜单
    function createContextMenu() {
        const menu = document.createElement('div');
        menu.className = 'dty-context-menu';
        menu.style.display = 'none';
        
        const editItem = document.createElement('div');
        editItem.className = 'dty-context-menu-item';
        editItem.textContent = '编辑';
        editItem.addEventListener('click', function() {
            if (currentEditingElement) {
                showEditDialog(currentEditingElement);
                hideContextMenu();
            }
        });
        
        menu.appendChild(editItem);
        document.body.appendChild(menu);
        
        // 点击页面其他地方时隐藏菜单
        document.addEventListener('click', function() {
            hideContextMenu();
        });
        
        return menu;
    }

    // 显示右键菜单
    function showContextMenu(x, y, element) {
        currentEditingElement = element;
        
        if (!contextMenu) {
            contextMenu = createContextMenu();
        }

        contextMenu.style.left = x + 'px';
        contextMenu.style.top = y + 'px';
        contextMenu.style.display = 'block';
    }

    // 隐藏右键菜单
    function hideContextMenu() {
        if (contextMenu) {
            contextMenu.style.display = 'none';
        }
    }

    // 初始化函数
    function initEditFunctionality() {
        // 获取所有具有 data-role="translated" 属性的元素
        const translatedElements = document.querySelectorAll('[data-dtyrole="translated"]');
        
        // 为每个元素绑定右键事件
        translatedElements.forEach(element => {
            element.addEventListener('contextmenu', function(e) {
                e.preventDefault();
                showContextMenu(e.clientX, e.clientY, this);
            });
        });
    }

    // 页面加载完成后初始化
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initEditFunctionality);
    } else {
        initEditFunctionality();
    }
})();